
import { Chart, Tooltip, Axis, Bar, Legend } from 'viser-react';
import * as React from 'react';
import { connect } from 'react-redux';
import html2canvas from 'html2canvas';
import { Group } from "./group.jsx";
import { Button } from 'antd';
import Groups from "./axis.jsx";
const sourceData = [
    { time: '10:10', call: 4, waiting: 2, people: 2 },
    { time: '10:15', call: 2, waiting: 6, people: 3 },
    { time: '10:20', call: 13, waiting: 2, people: 5 },
    { time: '10:25', call: 9, waiting: 9, people: 1 },
    { time: '10:30', call: 5, waiting: 2, people: 3 },
    { time: '10:35', call: 8, waiting: 2, people: 1 },
    { time: '10:40', call: 13, waiting: 1, people: 2 }
];
const data = sourceData;
const scale = [{
    dataKey: 'call',
    min: 0
}, {
    dataKey: 'people',
    min: 0
}, {
    dataKey: 'waiting',
    min: 0
}];
/**
 * base64转Blob
 * @param {string} b64Data
 * @param {string} contentType
 * @param {number} sliceSize
 */
function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    const byteCharacters = atob(b64Data);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    console.log('contentType', contentType);
    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
}
window.html2canvas = html2canvas

class Charts extends React.Component {
    downloadPDF = () => {
        console.log("xiazai");
        const pdfWrapper = document.getElementById('pdfContent');
        const opts = {
            allowTaint: false, // 允许污染
            scale: 2,
            useCORS: true
        }
        html2canvas(pdfWrapper, opts).then((canvas) => {
            console.log('canvas', canvas);
            const pageData = canvas.toDataURL('image/png', 2)// 获取生成的图片的url
            console.log(pageData);
            const tpye = 'image/png';
            const baseStr = pageData.substr(pageData.indexOf('base64,') + 7, pageData.length);
            const blob = b64toBlob(baseStr, tpye, 512);
            console.log(blob);
            if (navigator.msSaveBlob) {
                // ie
                console.log('流数据下载');
                navigator.msSaveBlob(blob, '新颜科技通讯行为画像.png');
            } else {
                console.log('a标签下载');
                let dt = pageData.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');
                dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=新颜科技通讯行为画像.png');
                const a = document.createElement('a');
                a.download = '新颜科技通讯行为画像.png';
                // a.href = URL.createObjectURL(blob);
                a.href = dt;
                document.body.appendChild(a);
                a.click();
            }
        }).catch(err => {
            console.log('下载报告失败', err)
        })
    }



    render() {
        return (
            <section id="pdfContent">
                <p>标题</p>
                <Button onClick={() => { this.downloadPDF() }}>下载PDF</Button>
                <Groups></Groups>
                <Chart forceFit height={400} data={data} scale={scale} padding={[120, 150]}>
                    <Tooltip />
                    <Legend
                        custom
                        allowAllCanceled
                        items={[
                            { value: 'waiting', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
                            { value: 'people', marker: { symbol: 'square', stroke: '#fdae6b', radius: 5 } }
                        ]}
                        onClick={(ev, chart) => {
                            const item = ev.item;
                            const value = item.value;
                            const checked = ev.checked;
                            const geoms = chart.getAllGeoms();
                            for (let i = 0; i < geoms.length; i++) {
                                const geom = geoms[i];
                                if (geom.getYScale().field === value) {
                                    if (checked) {
                                        geom.show();
                                    } else {
                                        geom.hide();
                                    }
                                }
                            }
                        }}
                    />
                    <Axis
                        dataKey="people"
                        label={{
                            textStyle: {
                                fill: '#ff0000'
                            }
                        }}
                        title={{
                            autoRotate: true,
                            offset: 10,
                            position: 'end',
                            text: 'people',
                            textStyle: {
                                textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                                fill: '#404040', // 文本的颜色
                                fontSize: '12', // 文本大小
                                fontWeight: 'bold', // 文本粗细
                                rotate: 0, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
                                textBaseline: 'bottom', // 文本基准线，可取 top middle bottom，默认为middle
                                opacity: 0.8
                            }
                        }}
                    />
                    <Axis
                        dataKey="waiting"
                        label={{
                            textStyle: {
                                fill: '#0000ff'
                            }
                        }}
                        title={{
                            autoRotate: true,
                            position: 'end',
                            text: 'waiting',
                            textStyle: {
                                textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                                fill: '#404040', // 文本的颜色
                                fontSize: '12', // 文本大小
                                fontWeight: 'bold', // 文本粗细
                                rotate: 0, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
                                textBaseline: 'bottom', // 文本基准线，可取 top middle bottom，默认为middle
                                opacity: 0.8
                            }
                        }}
                    />
                    <Axis
                        dataKey="time"
                        label={{
                            textStyle: {
                                fill: '#ff0000'
                            }
                        }}
                        title={{
                            autoRotate: true,
                            offset: 10,
                            position: 'end',
                            text: 'time',
                            textStyle: {
                                textAlign: 'start', // 文本对齐方向，可取值为： start middle end
                                fill: '#404040', // 文本的颜色
                                fontSize: '12', // 文本大小
                                fontWeight: 'bold', // 文本粗细
                                rotate: 0, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
                                textBaseline: 'bottom', // 文本基准线，可取 top middle bottom，默认为middle
                                opacity: 0.8
                            }
                        }}
                    />
                    {/*<Bar position="key*value" color="name" adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} />*/}
                    <Bar position="time*waiting" color="#3182bd" />
                    <Bar position="time*people" color="#fdae6b" />
                </Chart>
                <Group></Group>
            </section>
        );
    }
}
export default connect()(Charts);